require('../css/login.less')


// 验证码
const CaptchaMini = require('../lib/captcha-mini');

// 登入页面


document.ready(function () {


    // 表单验证


    // 获取元素
    let tel = document.querySelector('#tel');
    let yzm = document.querySelector('#inp-yzm');
    let password = document.querySelector('#password');
    let retrypw = document.querySelector('#retrypw');


    let login = document.querySelector('#login');


    // 获取元素值



    tel.addEventListener('focusout', function () {
        let t = tel.value

        // 电话校验
        let treg = /^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/
        verObj["t"] = verify(t, treg);

        let tTips = document.querySelector('#t-tips');


        if (verObj["t"]) {
            tTips.innerHTML = "手机号正确"
            tTips.style.color = "green"
        } else {
            tTips.innerHTML = "手机号错误"
            tTips.style.color = "red"
        }



    })



    // 验证码生成
    let captcha1 = new CaptchaMini({
        // lineNum:50,
        // dotR: 2,          //点的半径
        // dotNum: 85,       //点的数量
    });
    //定义一个全局变量来保存验证码
    let code = "";
    captcha1.draw(document.querySelector('#captcha1'), r => {
        // console.log('验证码:', r);
        code = r;

    });

    let verObj = {
        t: "",
        y: "",
        p: "",
        rp: ""
    }

    yzm.addEventListener('focusout', function () {

        let codeTips = document.querySelector('#codeTips');
        let y = yzm.value

        verObj["y"] = y.toUpperCase() === code.toUpperCase()

        if (verObj["y"]) {
            codeTips.innerHTML = "验证码正确!"
            codeTips.style.color = "green"
        } else {
            codeTips.innerHTML = "验证码错误!"
            codeTips.style.color = "red"
        }

    })


    password.addEventListener('focusout', function () {

        let p = password.value
        // 密码校验
        let preg = /^[a-zA-Z]\w{5,17}$/;
        verObj["p"] = verify(p, preg)

        let pTips = document.querySelector('#p-tips');

        console.log(pTips);
        if (verObj["p"]) {
            pTips.innerHTML = "密码难度适中"
            pTips.style.color = "green"
        } else {
            pTips.innerHTML = "密码错误请输入6-12位数字和字母"
            pTips.style.color = "red"
        }

    })


    retrypw.addEventListener('focusout', function () {
        let password = document.querySelector('#password');
        let rp = retrypw.value
        // 二次密码校验
        verObj['rp'] = rp === password.value

        let rpTips = document.querySelector('#rp-tips');

        if (rp === password) {
            rpTips.innerHTML = "两次密码一致"
            rpTips.style.color = "green"
        } else {
            rpTips.innerHTML = "请保证两次密码输入一致"
            rpTips.style.color = "red"
        }
    })



    login.addEventListener('click', function () {

        tel.focus();
        tel.blur()
        yzm.focus()
        yzm.blur()
        password.focus();
        password.blur();
        retrypw.focus();
        retrypw.blur();




        // 判断是否
        // 发送Ajax请求

        let f = true;
        for (ver in verObj) {
            if (!verObj[ver]) {
                f = false
            }
        }


        if (f) {
            let xhr = new XMLHttpRequest();


            xhr.open("POST", "http://139.9.177.51:8099/users/add")

            xhr.setRequestHeader('Content-Type', 'application/json;charset=utf-8');
            xhr.send(JSON.stringify({
                "account": tel.value,
                "password": password.value
            }))


            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    console.log(xhr.responseText);


                }
            }
        }

    })



    login.addEventListener('click', function () {






    })






    // 密码登录
    let psLogin = document.querySelector('#ps-login');
    psLogin.addEventListener('click', function () {

        location.href = "./register.html"

    })

})